<template>
    <div>父元素

        <Child :contents="users">
            <template v-slot:default>
                一共放了七天假，躺了8天
            </template>
            <template v-slot:content="slotProps">
                {{ slotProps.name }}
            </template>
            <template v-slot:foot>
                10.1-footer
            </template>

        </Child>


        <Child :contents="students">
            <template #default>
                马上校庆......
            </template>
            <template #content="slotProps">
                {{ slotProps.sname }}
            </template>
            <template #foot>
                马上校庆-footer
            </template>
        </Child>


        <h3>使用elementui展示的表格</h3>
        <el-table :data="users" style="width: 100%">
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="age" label="Address" />
            <el-table-column prop="age" label="操作">
                <template #default="scope">
                    <button>删除:{{ scope.row.name }}</button>
                </template>
            </el-table-column>
        </el-table>



    </div>
</template>

<script setup lang="ts" name='Facher'>
import { ref, reactive } from "vue";
import Child from "./Child.vue";



const users = reactive([
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
])
const students = reactive([
    { sname: "张三", age: 18 },
    { sname: "李四", age: 19 },
    { sname: "王五", age: 20 },
])



</script>

<style scoped></style>